﻿<%@ Page Language="C#" MasterPageFile="~/MasterPage/PBOAMasterPage.master" AutoEventWireup="true"
  CodeFile="Default.aspx.cs" Inherits="_Default" %>

<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="Server">
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="Server">
  <div style="display: none; text-align: center; position: absolute; left:150px; color: Red; font-weight: bold;"
    id="tip">
  </div>
  <div id="toolbar">
    <asp:Button ID="bResetDesktop" runat="server" Text="重置" OnClick="bResetDesktop_Click" />
  </div>
  <div id="Cards">
    <asp:ListView ID="lvDesktop" runat="server" OnItemDataBound="lvDesktop_ItemDataBound">
      <ItemTemplate>
        <asp:Panel ID="pCard" runat="server" CssClass="card" Style="left: 0px; top: 0px;">
          <asp:Panel ID="pDragHandle" runat="server" CssClass="handle" no='<%# Eval("P_ID")  %>'>
            <asp:Label ID="lTitle" runat="server" Text='<%# Eval("P_Title") %>'></asp:Label><div
              class="del" onclick="delCard(this.parentNode.parentNode);">
              <img src="Images/delete.gif" /></div>
          </asp:Panel>
          <asp:Panel ID="pContent" runat="server" CssClass="cardContent">
          </asp:Panel>
        </asp:Panel>
      </ItemTemplate>
    </asp:ListView>
  </div>
  <style>
    #toolbar { text-align: center; }
    #rightContentPlaceHolder { position:relative;}
    #Cards { position: relative; }
    #Cards .card { position: relative; width: 240px; height: 150px; margin: 3px; float: left; background-image: url(images/cardbg.png); }
    #Cards .handle { height: 25px; line-height: 25px; font-weight: bold; text-indent: 0.2em; }
    #Cards .handle .del { float: right; cursor: pointer; }
    #Cards .handle .del img { padding: 5px; width: 15px; height: 15px; }
    
    #Cards .cardContent{ padding:10px;}
  </style>
  <script>
    //事件添加
    $addHandler(window, "load", welcome, true);
    function welcome(e)
    {
      rebuildControls();

      $addHandler(ctrls, "mousedown", dragDown);
      $addHandler(ctrls, "mouseup", dragUp);
      //DesktopService.HelloWorld(function (r) { alert(r); });

    }

    //卡片换位
    var ctrls = [], //拖拽柄控件缓存数组
        nos = [], //拖拽柄控件编号数组
        sWidth = 740, //div总宽度,用来计算位置
        colWidth = 246, //列宽
        rowHeight = 156, //行高
        cols = sWidth / colWidth | 0, //卡片的列数
        rows, //卡片的行数
        exchaged = false; //卡片是否已交换 
    function getRowCol(index)
    {
      /// <summary>根据index返回所在行、列</summary>
      return [index / cols | 0, index % cols];
    }

    function changeDrag(targetIndex)
    {
      /// <summary>交换卡片</summary>
      var parentNode = dragT.parentNode;
      var tempNode = ctrls[targetIndex];
      ctrls[targetIndex] = ctrls[dragIndex];
      ctrls[dragIndex] = tempNode;

      for (var i in ctrls)
        parentNode.appendChild(ctrls[i].parentNode);
      var oP = getLeftTop(dragIndex);
      var nP = getLeftTop(targetIndex);
      dragT.style.left = parseInt(dragT.style.left) + oP[0] - nP[0] + "px";
      dragT.style.top = parseInt(dragT.style.top) + oP[1] - nP[1] + "px";
      exchaged = true;
      dragIndex = targetIndex;
    }

    function getIndex(e)
    {
      /// <summary>获取当前鼠标指针所在索引号</summary>
      var x = e.offsetX;
      var y = e.offsetY;
      var p = getLeftTop(dragIndex);
      var nowLeftTop = [p[0] + parseInt(dragT.style.left) + x, p[1] + parseInt(dragT.style.top) + y];
      var nowCol = nowLeftTop[0] / colWidth | 0;
      var nowRow = nowLeftTop[1] / rowHeight | 0;
      if (nowRow < 0) nowRow = 0;
      if (nowRow > rows - 1) nowRow = rows - 1;
      if (nowCol < 0) nowCol = 0;
      if (nowCol > cols - 1) nowCol = cols - 1;
      var index = nowRow * cols + nowCol;
      return (index > ctrls.length - 1) ? (ctrls.length - 1) : index;
    }

    function getLeftTop(index)
    {
      /// <summary>根据index返回位置</summary>
      var rowCol = getRowCol(index);
      return [rowCol[1] * colWidth, rowCol[0] * rowHeight];
    }

    function rebuildControls()
    {
      /// <returns type="Array" />
      /// <summary>重建控件数组缓，并返回控件当前的id顺序数组</summary>
      ctrls = [];
      nos = [];
      var c = $get("Cards");
      for (var i = c.firstChild; i != null; i = i.nextSibling)
        if (i.nodeType == 1)
          for (var j = i.firstChild; j != null; j = j.nextSibling)
          {
            if (j.nodeType == 1 && j.className == "handle")
            {
              ctrls.push(j);
              nos.push(j.attributes["no"].value);
            }
          }
      var l = ctrls.length;
      rows = Math.ceil(l / cols);
      return nos;
    }

    /* 对象拖拽功能的实现 */
    var oX, oY, dragT, dragIndex;

    function changeZIndex(t)
    {
      var max = 1;
      for (var i in ctrls)
      {
        var index = ctrls[i].parentNode.style.zIndex;
        if (index > max) max = index;
        if (t == ctrls[i].parentNode)//获取拖拽控件的位置信息
          dragIndex = i;
      }
      t.style.zIndex = max + 1;
    }

    function dragDown(e)
    {
      if (dragT) return;
      dragT = this.parentNode;
      setOpacity(dragT, 0.8);
      changeZIndex(dragT);
      if (!e) e = window.event;
      oX = e.screenX;
      oY = e.screenY;
      ctrls[dragIndex].style.cursor = "move";
      document.onmousemove = dragMove;
    }

    function dragMove(e)
    {
      if (!dragT) return;
      if (!e) e = window.event;
      dragT.style.left = parseInt(dragT.style.left) + (e.screenX - oX) + "px";
      dragT.style.top = parseInt(dragT.style.top) + (e.screenY - oY) + "px";
      oX = e.screenX;
      oY = e.screenY;
      var nowIndex = getIndex(e);
      if (nowIndex != dragIndex)
        changeDrag(nowIndex);
    }

    function dragUp(e)
    {
      if (!dragT) return;
      document.onmousemove = null;
      setOpacity(dragT, 1);
      dragT.style.top = 0;
      dragT.style.left = 0;
      ctrls[dragIndex].style.cursor = "";
      dragT = null;
      if (exchaged)
      {
        saveDesktopState("您的桌面状态已保存！");
        exchaged = false;
      }
    }

    function setOpacity(targetE, opacity)
    {
      /// <summary>设置元素的透明度</summary>
      if (Sys.Browser.name.indexOf("Internet Explorer") != -1)
        targetE.style.filter = "alpha(opacity=" + parseInt(opacity * 100) + ")";
      else
        targetE.style.opacity = opacity;
    }

    /* 实现结束 */

    function saveDesktopState(tipMessage)
    {
      /// <summary>保存桌面当前状态</summary>
      DesktopService.SetCards(rebuildControls().toString(), function () { showTip(tipMessage); }, function (err) { showTip("对不起，操作失败！原因：" + err.get_message()); });
    }

    function delCard(cardNode)
    {
      /// <summary>删除一个卡片</summary>
      cardNode.parentNode.removeChild(cardNode);
      saveDesktopState("删除桌面模块成功！");
    }

    function showTip(text)
    {
      /// <summary>显示桌面提示信息</summary>
      var targetE = $get("tip");
      targetE.innerText = text;
      setFadeAnimation(targetE);
    }

    function setFadeAnimation(targetElement)
    {
      /// <summary>对元素设置淡入淡出动画</summary>
      var opacity = 0;
      var flag = false;
      targetElement.style.display = "";
      setTimeout(delegate);

      function delegate()
      {
        if (opacity < 1 && !flag)
        {
          opacity += 0.02;
          setOpacity(targetElement, opacity);
          setTimeout(delegate, 20);
        }
        else if (!flag)
        {
          flag = true;
          setTimeout(delegate, 500);
        }
        else if (opacity > 0 && flag)
        {
          opacity -= 0.02;
          setOpacity(targetElement, opacity);
          setTimeout(delegate, 20);
        }
        else//动画结束
        {
          targetElement.style.display = "none";
        }
      }
    }
  </script>
</asp:Content>
